<template>
	<view class="brand-container">
		<view class="card info-card">
			<view class="shop-info flex">
				<view class="flex-grow">
					<view class="title font-bold">
						{{detail.mer_name}}
					</view>
					<view class="address flex info-item" @click="onAddress">
						<view class="address-info flex">
							<view class="iconfont2 icon-shopadress icon"></view>
							<view class="p2">
								{{ address.formatted_addresses.standard_address }}
							</view>
						</view>
						<view class="iconfont2 icon-shopright"></view>
					</view>
					<view class="time flex info-item">
						<view class="iconfont2 icon-shijian icon"></view>
						<view class="p2">
							{{ detail.delivery.mer_take_time[0] }} - {{ detail.delivery.mer_take_time[1] }}
						</view>
					</view>
				</view>
				<view class="iconfont2 icon-shopphone phone-icon" @click="onPhone"></view>
			</view>
			<view class="shop-iamge">
				<view class="documents-iamge" v-for="item in detail.mer_certificate" :key="item">
					<image :src="item" mode="aspectFit" class="image"></image>
					<view class="image-text">
						营业执照
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="card">
			<view class="title font-bold">
				商城承诺
			</view>
			<view class="flex promise">
				<view class="promise-title">
					基础服务
				</view>
				<view class="promise-container flex">
					
					<view class="promise-item ">
						爱心商家
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="card report text-center">
			举报商家
		</view>
	</view>
</template>

<script>
import qqmapsdk from "@/utils/qqmapsdk.js"
export default{
	data(){
		return {
			address:{}
		}
	},
	props:{
		detail:{
			type:Object
		}
	},
	methods:{
		// 解析地址
		toGetShopAddress(){
			let location = {
				longitude:this.detail.long,
				latitude:this.detail.lat,
			}
			qqmapsdk.reverseGeocoder({
				location,
				success: (res)=>{
					console.log(res);
					this.address = res.result
				},
				fail(err){
					console.log(err)
				}
			})
		},
		// 打电话
		onPhone(){
			uni.makePhoneCall({
				phoneNumber:this.detail.service_phone
			})
		},
		onAddress(){
			uni.navigateTo({
				url:`/pages/other/map/index?long=${this.detail.long}&lat=${this.detail.lat}`
			})
		}
	},
	watch:{
		detail:{
			handler(){
				this.toGetShopAddress();
			},
			immediate:true
		}
	}
}
</script>

<style scoped lang="scss">
.flex{
	display: flex;
}
.flex-grow{
	flex-grow: 1;
}
.font-bold{
	font-weight: bold;
}
.card{
	background-color: white;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
}
.image{
	height: 100%;
	width: 100%;
}
.text-center{
	text-align: center;
}

.title{
	font-size: 28rpx;
}

.brand-container{
	padding: 12rpx 20rpx 0 20rpx;
	background: linear-gradient(white,#f3f3f3 200rpx,);
	.info-card{
		.shop-info{
			.address{
				justify-content: space-between;
				align-items: flex-start !important;
				padding-right: 12rpx;
			}
			.phone-icon{
				font-size: 60rpx;
				height: fit-content;
				padding-left: 18rpx;
				color: #16a34a;
				border-left: 1rpx solid #f3f3f3;
			}
			.info-item{
				margin-top: 8rpx;
				color: #666666;
				font-size: 25rpx;
				align-items: center;
				.icon{
					font-size: 28rpx;
				}
				.p2{
					margin-left: 8rpx;
				}
			}
		}
		
		.shop-iamge{
			margin-top: 16rpx;
			.documents-iamge{
				height: 180rpx;
				width: 40%;
				border-radius: 12rpx;
				position: relative;
				overflow: hidden;
				
				.image-text{
					position: absolute;
					color: white;
					padding: 8rpx 12rpx;
					font-size: 24rpx;
					background: linear-gradient(rgba(0,0,0,0),black);
					bottom: 0;
					right: 0;
					left: 0;
				}
			}
			
		}
	}
	
	.promise{
		margin-top: 24rpx;
		.promise-title{
			font-size: 26rpx;
			padding-right: 30rpx;
		}
		.promise-container{
			flex-grow: 1;
			align-items: center;
			flex-wrap: wrap;
			.promise-item{
				color: #666;
				font-size: 24rpx;
			}
		}
	}
	.report{
		font-size: 26rpx;
		color: #333;
	}
}
</style>